import React, { Component } from 'react';
import DCAction from '../actions/DCAction';
import {
    View,
    StyleSheet,
    TouchableOpacity,
    TouchableWithoutFeedback,
    Image,
    Text,
    } from 'react-native';


var windowWidth = window.CommonWidth;
/*标题*/
export class NavBarTitleItem extends Component {
    static propTypes = {
        touchAction:React.PropTypes.func,
        title:React.PropTypes.any
    };
    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.title == nextProps.title
            && this.props.touchAction == nextProps.touchAction) {
            return false;
        }
        return true;
    }
    render() {
        if (!this.props.title) {
            return null;
        }
        var title;
        if (typeof (this.props.title) === 'function') {
            title = this.props.title();
        } else if (typeof (this.props.title) === 'string') {
            title = this.props.title;
        }

        var titleStyle = [titleItemstyles.title];
        

        return (
            <TouchableWithoutFeedback onPress={() =>{
                this.props.touchAction && this.props.touchAction()}
            }>
                <View style={[titleItemstyles.container,{width:as(200),left:(Common.size.width-as(200))/2,position:'absolute'}]}>
                    <Text style={titleStyle} numberOfLines={1}>
                        {title}
                    </Text>
                </View>
            </TouchableWithoutFeedback>);
    }
}

var titleItemstyles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'transparent',
        height:Common.size.navBarHeight,
        justifyContent:'center',
        alignItems:'center'
    },
    title: {
        fontSize: as(17),
        color:'#FFFFFF',
        textAlign:'center',
        width: as(150)
    }
});

/*返回按钮*/
export class NavBarBackItem extends Component {
    static propTypes = {
        isTabBar: React.PropTypes.bool,
        title:React.PropTypes.string
    };
    static defaultProps = {
        isTabBar: false,
        title: undefined
    };
    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.title == nextProps.title
            && this.props.isTabBar == nextProps.isTabBar) {
            return false;
        }
        return true;
    }
    render() {
        if (this.props.isTabBar == true) {
            return null;
        }
        
        var titleView;
        if (this.props.title) {
            titleView = (<Text style={backItemstyles.title}>
                {title}
            </Text>);
        }

        return (
            <TouchableOpacity onPress={() =>{
                    nav.pop()
               }
            }>
                <View style={backItemstyles.container}>
                    
                    <Text style={backItemstyles.icon}>
                        {'<'}
                    </Text>
                    {titleView}
                </View>
            </TouchableOpacity>);
    }
}

/*数据统计*/
export class NavBarRightItem extends Component {
    
    render() {

        return (
            <TouchableOpacity onPress={() =>{
                    
                    nav.push({title:'UsersData'})
               }
            }>
                <View style={backItemstyles.container}>
                    <Text style={backItemstyles.title}>数据统计</Text>
                </View>
            </TouchableOpacity>);
    }
}

var backItemstyles = StyleSheet.create({
    container: {
        backgroundColor: 'transparent',
        height:Common.size.navBarHeight,
        width: as(60),
        flexDirection:'row',
        alignItems:'center',

    },
    icon: {
        height:(Common.size.navBarHeight/2.4),
        width:(Common.size.navBarHeight/2.4),
        marginLeft: as(9),
        fontSize: asFont(20),
        color: 'white'
    },
    title: {
        color:'#FFFFFF',
        fontSize: asFont(14),
    }

});



